<template>
	<div style="height: 100%;">
		<el-dialog :visible.sync="imgDialog" width="30%">
			<el-image :src="imgUrl" v-if="imgDialog" fit="contain"></el-image>
			<!-- <img :src="imgUrl" v-if="imgDialog" style="width: 100%;"/> -->
		</el-dialog>
		<el-card class="main2">
			<div slot="header">
				<span>系统设置/学生管理</span>
			</div>
			<div style="margin-bottom: 0.625rem;">
				<el-select size="small" v-model="banjiId" placeholder="请选择班级" clearable>
					<el-option v-for="bj in bjs" :key="bj.id" :value="bj.id" :label="bj.name"></el-option>
				</el-select>
			</div>
			<data-table ref="abcd" 
				v-if="tableVisible" 
				:columnAttributes="columnAttributes" 
				:formObj="form" 
				:tableAttribute="tableAttribute" 
				@current-change="currentChange"
				path="student/" 
				pageable
			>
			<template v-slot:form>
				<el-form-item label="学号:" :label-width="labelWidth" prop="stuNo">
					<el-input v-model="form.stuNo" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="姓名:" :label-width="labelWidth" prop="name">
					<el-input v-model="form.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="性别" :label-width="labelWidth" prop="sex">
					<el-input v-model="form.sex" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="照片" :label-width="labelWidth" prop="file">
					<el-upload :before-upload="beforeUpload" action="student/upload">
						<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
						<span style="margin-left: 0.625rem;">{{fileName}}</span>
					</el-upload>
				</el-form-item>
			</template>
				<template slot="buttons">
					<el-button type="info" icon="el-icon-refresh-left" size="small" @click="resetPwd" :disabled="buttonDisabled">密码重置</el-button>
					<el-button type="info" icon="el-icon-picture" size="small" @click="showImg" :disabled="buttonDisabled||!current.uuid">显示照片</el-button>
				</template>
			</data-table>
		</el-card>
		
	</div>
</template>
	
<script>
	import dataTable from '../components/dataTable.vue'
	export default {
		components:{dataTable},
		data() {
			return {
				tableVisible:false,
				imgDialog:false,
				imgUrl:'',
				banjiId: '',
				bjs:[],
				form:{
					id:'',
					name:'',
					sex:'',
					stuNo:'',
					tbClassId:''
				},
				fileName:'',
				columnAttributes:[
					{prop:'stuNo',label:'学号'},
					{prop:'name',label:'姓名'},
					{prop:'sex',label:'性别'},
				],
				tableAttribute:{
					border:true,
					urlParam:{tbClassId:1}
				},
				rules:{
					stuNo:[{
						required:true,
						message:'学号不能为空',
						trigger:'blur'
					},{
						type:'number',
						message:'学号必须为数字',
						trigger:'blur',
						transform: (value) => Number(value)
					}],
					name:[{required:true,message:'姓名不能为空',trigger:'blur'}],
					sex:[{required:true,message:'性别不能为空',trigger:'blur'}]
				},
				current:{uuid:''},
				labelWidth:'100px',
				buttonDisabled:true
			}
		},
		created() {
			this.$ajax.post('banji/list',{}).then(res=>{
				var result=res.data;
				this.bjs=result;
				//this.banjiId=1;
			})
		},
		methods:{
			showImg(){
				if(this.current.uuid){
					this.imgUrl=this.baseUrl+'student/download?id='+this.current.id;
					this.imgDialog=true;
				}else{
					this.$message.info("该学生没有上传照片");
				}
			},
			beforeUpload(file){
				this.form.file=file;
				this.fileName=file.name;
				return false;
			},
			resetPwd(){
				this.$confirm('是否要重置选中的学生的密码？').then(()=>{
					this.$ajax.post('student/restPwd',this.current).then(res=>{
						var result=res.data;
						if(result.success){
							this.$notify.success({message:result.msg,position:'bottom-right'});
						}else{
							this.$message.error(result.msg);
						}
					})
				}).catch(()=>{})
			},
			currentChange(val,flag){
				this.current=val;
				this.buttonDisabled=flag;
				this.fileName='';
				delete this.form.file;
			}
		},
		watch:{
			banjiId(val){
				this.tableVisible=false;
				if(val){
					this.tableAttribute.urlParam={tbClassId:val};
					this.$nextTick(()=>{
						this.tableVisible=true;
						//this.$refs.abcd.refreshTable();
					})
				}
			}
		}
	}
</script>

<style scoped>
	.main2{
		height: calc(100% - 5px);
	}
</style>
